<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BasicAuth</title>
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/Particleground.js"></script>
    <link href="css/login.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="lib/slidecaptcha/disk/slidercaptcha.min.css" rel="stylesheet"/>
    <style>
        .slidercaptcha {
            margin: 0 auto;
            width: 314px;
            height: 286px;
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
            margin-top: 40px;
        }

        .slidercaptcha .card-body {
            padding: 1rem;
        }

        .slidercaptcha canvas:first-child {
            border-radius: 4px;
            border: 1px solid #e6e8eb;
        }

        .slidercaptcha.card .card-header {
            background-image: none;
            background-color: rgba(0, 0, 0, 0.03);
        }

        .refreshIcon {
            top: -54px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#login-backgroud").particleground({
                dotColor: '#E8DFE8',
                lineColor: '#133b88'
            })
        })
        var slideCheck = false;
        function login() {
            if (!slideCheck) {
                alert("请输入验证码");
            } else {
                alert("验证码通过");
            }
        }


    </script>
</head>
<body>
<div class="login-backgroud" id="login-backgroud">
    <div class="login-box">
        <form name="loginForm" role="form">
            <div class="title">
                <label><font size="4">请输入登录信息</font></label>
            </div>
            <div class="username">
                <label for="userName"> <img src="img/uesname.png" alt=""></label>
                <input id='userName' name="name" type="text" maxlength="10"
                       placeholder="请输入用户名" autocomplete="off" required>
                <label style="margin-left: 80%;"> <img src="img/tick.png" alt="">
                </label>
            </div>
            <div class="password">
                <label for="userPass"> <img src="img/password.png"></label>
                <!--  两个name一样的输入框，防止浏览器自动记住密码 -->
                <input type="password" name="password" style="display: none">
                <input id='userPass' type="text" name="password" maxlength="10"
                       onfocus="this.type='password'" autocomplete="off"
                       placeholder="请输入密码" required>
                <label style="margin-left: 80%;">
                    <img src="img/tick.png" alt="">
                </label>
            </div>
            <div class="card-body">
                <div id="captcha"></div>
            </div>
            <div class="btn" type="submit" onclick="login()">
                登&nbsp;&nbsp;&nbsp;&nbsp;录
            </div>
        </form>
    </div>
</div>
<script src="lib/slidecaptcha/disk/longbow.slidercaptcha.min.js"></script>
<script>
    var captcha = sliderCaptcha({
        id: 'captcha',
        setSrc: function () {
            return 'lib/slidecaptcha/images/Pic' + Math.round(Math.random() * 4) + '.jpg';
        },
        onSuccess: function () {  //成功事件
            var handler = setTimeout(function () {
                window.clearTimeout(handler);
                slideCheck = true;
                // captcha.reset();
            }, 500);
        }
    });
</script>
</body>
</html>